<template>
  <scroll-view :scroll-y="true" class="h-11/12 m-auto w-11/12">
    <uni-forms :modelValue="formData">
      <!-- 菜肴类型 -->
      <uni-card title="菜肴类型" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.caiYaoLeiXing"
            :localdata="caiYaoLeiXing"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 餐次时间 -->
      <uni-card title="餐次时间" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.canCiShiJian"
            :localdata="canCiShiJian"
          />
        </uni-forms-item>
        <!-- 宴会名称 -->
        <uni-forms-item
          v-if="formData.canCiShiJian === '宴会(可在下个题项备注名称)'"
        >
          宴会名称:
          <uni-easyinput type="textarea" v-model="formData.yanHuiMingCheng" />
        </uni-forms-item>
      </uni-card>
      <!-- 食品名称 -->
      <uni-card title="食品名称" extra="必填*">
        <uni-forms-item>
          <uni-easyinput type="textarea" v-model="formData.shiPinMingCheng" />
        </uni-forms-item>
      </uni-card>
      <!-- 食品制备人 -->
      <uni-card title="食品制备人" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.shiPinZhiBeiRen" />
        </uni-forms-item>
      </uni-card>
      <!-- 留样储存温度(℃) -->
      <!-- <uni-card title="留样储存温度(℃)" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.liuYangChuCunWenDu" />
        </uni-forms-item>
      </uni-card> -->
      <!-- 留样人 -->
      <uni-card title="留样人" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.liuYangRen" />
        </uni-forms-item>
      </uni-card>
    </uni-forms>
    <ConfigComponent
      @clearFormData="clearFormData"
      @updateFormData="updateFormData"
      :formData="formData"
      name="shiPinLiuYang"
    />
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import ConfigComponent from '@/components/ConfigComponent/ConfigComponent.vue';

// 表格提交信息
const formData = ref({
  caiYaoLeiXing: '', //菜肴类型
  canCiShiJian: '', //餐次时间
  yanHuiMingCheng: '', //宴会名称
  shiPinMingCheng: '', //食品名称
  shiPinZhiBeiRen: '', //食品制备人
  // liuYangChuCunWenDu: '', //留样储存温度(℃)
  liuYangRen: '', // 留样人
});
// 菜肴类型数据
const caiYaoLeiXing = [
  {
    text: '冷食',
    value: '冷食',
  },
  {
    text: '热食',
    value: '热食',
  },
  {
    text: '点心/甜品',
    value: '点心/甜品',
  },
  {
    text: '客人自带',
    value: '客人自带',
  },
  {
    text: '饮品',
    value: '饮品',
  },
  {
    text: '其他',
    value: '其他',
  },
];
// 餐次时间
const canCiShiJian = [
  {
    text: '早餐',
    value: '早餐',
  },
  {
    text: '午餐',
    value: '午餐',
  },
  {
    text: '晚餐',
    value: '晚餐',
  },
  {
    text: '宵夜',
    value: '宵夜',
  },
  {
    text: '茶歇',
    value: '茶歇',
  },
  {
    text: '宴会(可在下个题项备注名称)',
    value: '宴会(可在下个题项备注名称)',
  },
];

// 清空表单数据
const clearFormData = () => {
  formData.value = {
    caiYaoLeiXing: '', //菜肴类型
    canCiShiJian: '', //餐次时间
    yanHuiMingCheng: '', //宴会名称
    shiPinMingCheng: '', //食品名称
    shiPinZhiBeiRen: '', //食品制备人
    // liuYangChuCunWenDu: '', //留样储存温度(℃)
    liuYangRen: '', // 留样人
  };
};
// 更新表单数据
const updateFormData = (data: any) => {
  formData.value = data;
};
</script>

<style lang="scss" scoped>
::v-deep.uni-card {
  .uni-card__header {
    .uni-card__header-extra {
      .uni-card__header-extra-text {
        color: #ff0000;
      }
    }
  }
}
</style>
